myApp.pages.statistics = {
    init: function () {
        this.initMonth();
        this.initYear();
        this.initAll();
    },
    initMonth: function () {
        myApp.api.getMonth({
            success: (data) => {
                let html = myApp.template.render('#monthListTmpl', {month: data.list});
                $$('#monthList').html(html);
            }
        })
    },
    initYear: function () {
        let year = new Date().getFullYear(), month = new Date().getMonth() + 1;
        month = month > 10 ? month : '0' + month;
        getYear(year, month);
        let $year = $$('#yearSearch');
        let $month = $$('#monthSearch');

        $year.on('change', (e) => {
            getYear($year.val(), $month.val())
        });

        $month.on('change', (e) => {
            getYear($year.val(), $month.val())
        });

        $month.html('');
        ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'].forEach((val) => {
            $month.append('<option value=' + val + '>' + val + '月' + '</option>');
        });


        function getYear(year, month) {
            myApp.api.getYear({
                data: {year: year, month: month},
                success: (data) => {
                    let html = myApp.template.render('#monthListTmpl', {month: data.list});
                    $$('#yearList').html(html);

                    $month.val(data.month);
                    $year.html('');
                    data.years.forEach((year) => {
                        $year.append('<option value=' + year + '>' + year + '年' + '</option>');
                    });
                    $year.val(data.year);
                }
            });
        }
    },
    initAll: function () {
        myApp.api.getAll({
            success: (data) => {
                let html = myApp.template.render('#allListTmpl', {data: data});
                $$('#allList').html(html);

                let years = data.list;
                let months = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
                let monthData = [];
                let yearsData = [];
                let seriesData = [];

                months.forEach((month) => {
                    monthData.push(month + '月')
                });

                years.forEach((row) => {
                    yearsData.push(row.year + '年');
                    let yearsMonth = [];
                    months.forEach((month) => {
                        for (let i = 0; i < row.list.length; i++) {
                            if (month === row.list[i].month) {
                                yearsMonth.push(row.list[i].amount / 100);
                                return;
                            }
                        }
                        yearsMonth.push(0)
                    });
                    seriesData.push({
                        name: row.year + '年',
                        type: 'line',
                        stack: '总量',
                        data: yearsMonth
                    })
                });

                let option = {
                    title: {
                        // text: '折线图堆叠'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: yearsData
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: monthData
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: seriesData
                };

                let myChart = echarts.init(document.getElementById('map'));
                myChart.setOption(option);

            }
        })
    }
};